/* 全局公共样式 
需要在uni.scss文件中引入:@import 'common/css/common.scss';
*/

/* 单位说明
rpx:把屏幕宽度设为750等份,1rpx是屏幕1/750；当宽度为750px时1rpx=1px，当宽度大于750px时，1rpx>1px
推荐:宽度相关的用rpx;高度和文字大小用px;
*/

/* 注意点
如果出现后面的类型覆盖不了前面类名的样式，请把后面类型放到前面类名的下面
*/

//* 字体大小 */
$font-size-small: 24rpx;
$font-size-medium: 28rpx;
$font-size-large: 32rpx;
$font-size-num:36rpx;
// 页面标题样式
$font-size-title:40rpx;

//* 全局颜色 */
$primary: #539BFF;
$primary2:#12999e;
// #12999e 
$gray: #999999; // (灰色）文字用

$gray1: #F6F6FB; // 浅 (背景)
$gray2: #aaaaaa; // 深
$gray3: #ecf0f1; // 边框
$gray4: #EEEEEE; // 浅灰
$blue: #4cb2b6; //深蓝(图标)
$blue1: #1890ff; //蓝
$black: #333;	//黑
$black2:#023537;
$white: #fff;  //白
$red: #FF0000;  //红
$green: #43a047; //绿
$green-bg:#F6F6FB; // 浅灰（背景）
//* 行高 */
$height-row-small: 50rpx;
$height-row-medium: 100rpx;
$height-row-large: 120rpx;

//* 间距 */
$spacing-small: 10rpx; // 小间距
$spacing-medium: 30rpx; // 中等间距
$spacing-large: 40rpx; // 大间距

//如果设置了全局字体 那么如下结构就会失效 可以设置在content里面

// <view class='font-size-medium'>
// 	<view>
// 		我还是全局字体，继承不了父级字体
// 	</view>
// 	<view>
		
// 	</view>
// </view>

//* 页面全局样式 */
.content{
	// 默认为中号字体
	color: #5A5C5C;
	font-size:$font-size-medium; 
	
	background-color: $green-bg;
	height: 100vh;
}

// * {
// 	font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
// }

//* 字体大小 */
.font-size-small {
	font-size: $font-size-small;
}
.font-size-medium {
	font-size: $font-size-medium;
}
.font-size-large {
	font-size: $font-size-large;
}
.font-size-title {
	font-size: $font-size-title;
}
// 突出的数字
.font-num {
	font-size: $font-size-num;
	font-weight: bold;
	color: $primary;
}
.font-class-class {
	color: $black;
}
.font-title{ //标题字体
	font-size: 40rpx;
}

//* 字体颜色 */
.font-color-black {
	color: $black;
}
.font-color-white {
	color: $white;
}
.font-color-grey {
	color: $gray;
}
.font-color-red {
	color: $red;
}
.font-color-primary {
	color: $primary;
}


//* 字间距 */
.font-spacing-small {
	letter-spacing: 2rpx;
}
.font-spacing {
	letter-spacing: 4rpx;
}
.font-large {
	letter-spacing: 6rpx;
}



//* 字体样式 */
.font-bold {
	//字体加粗
	font-weight: bold;
}
.font-center {
	//字体居中
	text-align: center;
}

// 默认图片大小
.image-primary {
	width: 30rpx;
	height: 30rpx;
	margin-right: 16rpx;
}

// 二级标题样式
.font-second-title {
	color: $black;
}

// uniapp  弹窗组件
::v-deep .uni-popup-dialog {
	overflow: hidden;
	border-radius: 20rpx;
	.uni-dialog-title {
		    padding: 10px;
		    background-color: $primary;
		    // border-radius: 20rpx 20rpx 0 0;
			.uni-popup__info {
				color: #fff;
			}
	}
}

//* 背景 */
.bg-gray {
	background-color: $gray1;
}
.bg-white {
	background-color: $white;
}
.bg-blue {
	background-color: $blue;
}

//* 边框设置 */

.border {
	border: 1rpx solid $gray3;
} //边框
.border-back {
	border: 1rpx solid #000;
} //边框黑色
.border-primary {
	border: 1rpx solid $primary;
} //主题色
.border-top {
	border-top: 1rpx solid $gray3;
} //上边框
.border-bottom {
	border-bottom: 1rpx solid $gray3;
} //下边框

//* 默认边框阴影 */
.box-shadow-primary {
	box-shadow: 0 0px 5px rgba(0, 0, 0, 0.1);
}
//* 高层级样式 */
.box-shadow-medium {
	box-shadow: 0 2px 3px #ebedf0, 0 3px 6px rgba(0,0,0, 10%);
}

//* 线条样式 */
.line-gray {
	//灰色线
	width: 100%;
	height: 1rpx;
	margin: 0px auto;
	padding: 0px;
	background-color: #F0F0F0;
	overflow: hidden;
}
.line-primary {
	//主题色线
	width: 100%;
	height: 1px;
	margin: 0px auto;
	padding: 0px;
	background-color: $primary;
	overflow: hidden;
}
.line-division {
	//垂直分割线
	height: 80%;
	width: 1rpx;
	background-color: $gray3;
}

/*  flex弹性布局
	以下弹性布局设置的都是针对当前组件的子组件
	display: flex;	//使用弹性布局
	flex-direction: column;	//column:组件垂直排列;row:组件水平排列
	align-items:组件对齐方式。基于flex-direction的值，以水平排列为例
	align-items: center;	//多个组件在一行中，上下居中对齐
	align-items : flex-start; 多个组件在一行中，靠上对齐
	align-items : flex-end; 多个组件在一行中，靠下对齐
	justify-content:组件间距方式。基于flex-direction的值，下面以水平排列为例
	justify-content : center;//多个组件居中挨着，左右空出来
	justify-content : flex-start;//多个组件靠左挨着，右边空出来
	justify-content : flex-end;//多个组件靠右挨着，左边空出来
	justify-content : space-between;//多个组件帖着左右的边，组件之间空出来
	justify-content : space-around;//多个组件之间的距相等，相当于padding
*/
.row-primary {
	// 默认横轴均匀分布
	display: flex;
	justify-content: space-around;
}
.row {
	//一行排列
	display: flex;
	flex-direction: row;
}
.row-small {
	//一行排列，小行高
	display: flex;
	flex-direction: row;
	align-items: center;
	min-height: $height-row-small;
}
.row-medium {
	display: flex;
	flex-direction: row;
	align-items: center;
	min-height: $height-row-medium;
}
.row-large {
	display: flex;
	flex-direction: row;
	align-items: center;
	min-height: $height-row-large;
}
.row-between {
	//一行排列并且两端对齐
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.row-center {
	//一行排列并且两端对齐
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.col {
	//列垂直居中
	align-items: center;
}
.col-left {
	//列垂直居中
	align-items: left;
}
.col-center {
	//列垂直居中
	align-items: center;
}

/* 卡片样式 */
.radius {
	//圆角
	border-radius: 20rpx;
}
.radius-big {
	//圆角
	border-radius: 20rpx;
}
.message-primary {
	background-color: #F0F9EB;
	color: #67C23A;
	padding: $spacing-medium;
}
.card {
	//卡片
	margin-bottom: 20rpx;
	background-color: #fff;
	border-radius: 20rpx;
	box-shadow: 0 2px 3px #ebedf0;
	padding: $spacing-medium;
	// 卡片标题
	.card-title {
		// padding: $spacing-medium;
		padding: 0px 0px $spacing-medium;
		font-size: $font-size-large;
		color: $primary;
		background-color: $white;
		border-radius: 6rpx 6rpx 0px 0px;
	}
	.card-border+.card-border {
		border-left: 1rpx solid #eee;
	}
}
.card-radius {
	//卡片圆角大
	padding: 20rpx;
	margin: 20rpx;
	background-color: #fff;
	border-radius: 20rpx;
	box-shadow: 0 2px 3px #ebedf0;
}

.card-right {
	width: 60%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	
}
.card-left {
	width: 40%;
	height: 180rpx;
	position: relative;
	overflow: hidden;
	margin-right: 25rpx;
	image {
		width: 100%;
		height: 100%;
	}
	//图片上的文字
	.text-on-img {
		color: #fff;
		background-color: rgba(0, 0, 0, 0.5);
		padding: 6rpx;
		font-size: 18rpx;
		position: absolute;
		right: 10rpx;
		bottom: 10rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border-radius: 8rpx;
	}
}

// 标题栏

.row-item{
	display: flex;
	flex-direction: row;
	min-height: 96rpx;
	justify-content: space-between;
	align-items: center;
	padding: 0 30rpx;
	// border-bottom: 1rpx solid $gray3;
}


/* 表单样式 */

/* 按钮样式 */
// .button-small {
// 	border-radius: 8rpx;
// 	font-size: $font-size-medium;
// 	width: 260rpx;
// 	color: $white;
// 	height: 70rpx;
// 	line-height: 70rpx;
// 	// border: none !important;
// 	background-color: $primary;
// 	text-align: center;
// 	font-size: $font-size-small;
// }
.button-small {
	border-radius: 8rpx;
	width: 300rpx;
	color: $white;
	height: 80rpx;
	line-height: 80rpx;
	// border: none !important;
	background-color: $primary;
	text-align: center;
}

// 默认大小按钮
.button-primary {
	border-radius: 8rpx;
	width: 100%;
	margin: 0rpx 70rpx;
	color: $white;
	height: 100rpx;
	line-height: 100rpx;
	// border: none !important;
	background-color: $primary;
	font-size: $font-size-large;
	text-align: center;
}
// 大按钮
.button-big {
	border-radius: 8rpx;
	width: 100%;
	color: $white;
	height: 90rpx;
	line-height: 90rpx;
	// border: none !important;
	background-color: $primary;
	font-size: $font-size-large;
	text-align: center;
}
// 按钮透明度
.button-opacity {
	opacity: .8;
}



.fixed-bottom {
	//固定在底部(一般用户按钮固定在底部)
	position: fixed;
	bottom: 0;
	border-radius: 0;
	width: 100%;
}

// .bottom-radius{
// 	border-radius: 30rpx;
// 	font-size: $font-size-medium;
// 	width: 180rpx;
// 	color: $white;
// 	height: 60rpx;
// 	line-height: 60rpx;
// 	// border: none !important;
// 	background-color: $primary;
// 	text-align: center;
// 	font-size: $font-size-small;
// }



/* 阴影 */
.shadow {
	box-shadow: 0 8px 12px #ebedf0;
}

/* 输入框样式 */
.input {
	border: none;
	border-radius: 10rpx;
	box-shadow: 0 0 60rpx 0 rgba(43, 86, 112, 0.1);
	width: 100%;
	margin: 20rpx auto;
	input {
		height: 90rpx;
		padding-left: 20rpx;
		font-size: 32rpx;
	}
	.eliminate {
		margin-right: 20rpx;
	}
	.placeholder {
		font-size: #c0c0c0;
	}
}
// 普通input样式
.common-input{
	padding: 16rpx 0;
	// border: 1rpx solid $gray2;
	font-size: $font-size-medium;
	padding-left: 10rpx;
	border-radius: 6rpx;
	background-color: white;
	box-shadow: 0 0 60rpx 0 rgba(43, 86, 112, 0.1);
}

// 必填项前面 星号
.asterisk{
	color: $red;
	padding: 6rpx;
}

.choice-item {
	//查询选择(在线 离线) item
	background-color: #EFF2FF;
	text-align: center;
	line-height: 60rpx;
	width: 90%;
	margin: 10rpx;
	// padding: 0 20rpx;
	margin-bottom: 30rpx;
	font-size: 24rpx;
	height: 60rpx;
	color: #3776FF;
	border-radius: 10rpx;
	border: 1rpx solid #3776FF;
}
.choice-item-on {
	//点击样式
	background-color:$primary;
	text-align: center;
	line-height: 60rpx;
	width: 90%;
	// padding: 0 20rpx;
	margin-bottom: 30rpx;
	font-size: 24rpx;
	height: 60rpx;
	color: #fff;
	border-radius: 10rpx;
}

/* 空行 */
.empty-line-small {
	height: 20rpx;
}
.empty-line {
	height: 30rpx;
}
.empty-line-large {
	height: 50rpx;
}

/* 链接 */
.link {
	font-size: $font-size-medium;
	color: $blue1;
}
.link-large {
	font-size: $font-size-large;
	color: $blue1;
}

/* 标题(一般用于新闻标题) */
.title {
	font-size: 40rpx;
	text-align: center;
	height: $height-row-medium;
	line-height: $height-row-medium;
}

.text-ellipsis {
	//文字溢出显示省略号 要设置元素宽度
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* uniapp 纯英文或者数组不换行 */
.Line-feed {
	word-break:break-all;
	word-wrap:break-word;
	
}


.navbar {
	//navbar吸顶
	width: 100vw;
	position: sticky;
	top: 0;
	z-index: 99999;
}

/* 
	表单行样式，	可填写文本
 */
.form-item {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	min-height: $height-row-medium;
	border-bottom: 1rpx solid $gray3;
	.uni-input-placeholder {
		text-align: right;
		font-size: $font-size-medium;
	}
	.data-v-891c2434 {
		text-align: right;
	}
	.arry {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		width: 200rpx;
		color: $gray;
	}
	//微信小程序文字右浮动
	.data-v-3a65c7b0{
		text-align: right;
		font-size: $font-size-medium;
	}
	// .data-v-3a65c7b0{
	// 	color: $gray;
	// }
	.iconxiangyoujiantou {
		margin-left: 10rpx;
	}
	input{
		color: $gray;
		text-align: right;
	}
	.uni-input-input {
		text-align: right;
		color: $gray;
	}
}

// 标题行
.title-line{
	display:flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	color: #000;
	padding: 20rpx 30rpx;
}

/* 间距设置
	设padding的元素不要设width=100%，否则右边会溢出屏幕；有两种方式解决:
	1.上一级设宽度100%,不设flex布局;下一个view设padding,不设宽度；如<view class="content"><view class="padding-default"></view></view>
	2.在最里面的一个view里设padding-right: $padding-medium;
*/
.padding-small {
	padding: $spacing-small;
}
.padding {
	padding: $spacing-medium;
}
.padding-large {
	padding: $spacing-large;
}
.padding-horizontal-small {
	padding: 0rpx $spacing-small;
}
.padding-horizontal {
	padding: 0rpx $spacing-medium;
}
.padding-horizontal-large {
	padding: 0rpx $spacing-large;
}
.padding-vertical-small {
	padding: $spacing-small 0rpx;
}
.padding-vertical {
	padding: $spacing-medium 0rpx;
}
.padding-vertical-large {
	padding: $spacing-large 0rpx;
}

.card-padding{
	padding: 20rpx;
}

.margin-small {
	margin: $spacing-small;
}
.margin {
	margin: $spacing-medium;
}
.margin-large {
	margin: $spacing-large;
}
.margin-horizontal-small {
	margin: 0rpx $spacing-small;
}
.margin-horizontal {
	margin: 0rpx $spacing-medium;
}
.margin-horizontal-large {
	margin: 0rpx $spacing-large;
}
.margin-vertical-small {
	margin: $spacing-small 0rpx;
}
.margin-vertical {
	margin: $spacing-medium 0rpx;
}
.margin-vertical-large {
	margin: $spacing-large 0rpx;
}

// 文本之间的上边距
.margin-top-text {
	margin-top:$spacing-medium;
}
// nav列中中上下各项的间距
.margin-top-nav {
	margin-top: $spacing-large;
}
.u-sticky{
	padding-bottom: 6rpx !important;
}

//解决富文本图片太大限制大小
::v-deep .html-img{
 max-width:100%;
 // overflow: hidden;
 img{
  max-width:100%;
 }
}
//小程序  v-html 组件内图片的样式
.rich-img{
 max-width:100% !important;
 height: auto !important;
}
.rich-p{
 max-width:100%;
}

::v-deep uni-page-wrapper {
	background-color: #F6F6FB;
}

::v-deep uni-button:after {
	border: none;
} //去除按钮默认样式

/* 去除uview默认样式 */

::v-deep button::after {
	border: none;
}
::v-deep .u-status-bar {
	height: 0 !important;
} //uview弹出框内边距top 去除

// /* 去除uview表单默认样式  */
// ::v-deep .u-form-item__body__left__content__label[data-v-067e4733]{  //表单左字段名宽度
// 	width: 140rpx;
// 	font-size: $font-size-medium !important;
// }
// ::v-deep .u-form-item__body__left[data-v-067e4733]{
// 	display: flex;
// 	align-items: center;
// 	width: 140rpx !important;
// }
// ::v-deep .u-input .u-input--square{   //输入框内容过于先前
// 	padding-left: 200rpx !important;
// }
// ::v-deep .uni-input-input{   //输入框字体大小
// 	font-size: $font-size-medium !important;
// }
// ::v-deep .u-form-item__body{
// 	padding: 28rpx 0;
// }
// ::v-deep .u-line{  //每个字段下边框
// 	border-bottom: 1rpx solid $gray3 !important;
// }
